<template>
  <div>
    <div class="filter-bar-query">
      <el-row style="height: 40px;" >
        <el-col :span="1" style="text-align: center">
          <el-button size="small" type="primary" @click="createChannelType" class="el-icon-plus"> 新建通道类型</el-button>
        </el-col>
        <el-col :span="4" :offset="19">
        <el-input class="search-box" placeholder="搜索" icon="search" size="small" v-model="search" @keyup.enter.native = "SearchIndexContent" @click='SearchIndexContent'>
        </el-input>
        </el-col>
      </el-row>
      <el-table :data="channelTypeData" style="margin-top:10px;">
        <el-table-column prop="name" label="通道类型"></el-table-column>
        <el-table-column prop="name" label="优先级"></el-table-column>
        <el-table-column prop="name" label="通道描述"></el-table-column>
        <el-table-column prop="name" label="状态"></el-table-column>
        <el-table-column prop="name" label="操作">
          <template scope="scope">
            <el-button type="text" @click="startCannelType(scope.row.id)">启用</el-button>
            <el-button type="text" @click="editCannelType(scope.row.id)">编辑</el-button>
            <el-button type="text" @click="delCannelType(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col :span="20" style="text-align: right;" :offset="4">
          <el-pagination style="padding-right: 0;margin-top: 10px;"
            @current-change="channelTypeCurrentChange"
            :current-page.sync="currentPage"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="10">
          </el-pagination>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      :title="typeTitle"
      :visible.sync="channelTypeEditVisible"
      size="small">
      <el-row type="flex" justify="center" class="create-index-content">
        <el-col :span="18">
          <el-row type="flex" class="create-input-row">
            <el-col>
              <span class="create-index-label">通道类型</span>
              <el-input v-model="chanelTypeName" size="small" class="create-index-input" placeholder="请输入数据源名称"></el-input>
            </el-col>
          </el-row>
          <el-row type="flex" class="create-input-row">
            <el-col>
              <span class="create-index-label">优先级</span>
              <el-select v-model="chanelTypeLevelValue" class="create-index-input" size="small" placeholder="请选择数据源类型">
                <el-option
                  v-for="item in chanelTypeLevelData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
          <el-row type="flex" class="create-input-row ">
            <el-col>
              <span class="create-index-label create-label-description">通道描述</span>
              <el-input v-model="chanelTypeDescription" type="textarea" size="small" class="create-index-input" placeholder="请输入数据源描述"></el-input>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="channelTypeEditVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="editConfrim">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="channelTypeActiveVisible"
      size="tiny">
      <span>是否要{{activeStatus}}当前通道</span>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="channelTypeActiveVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="activeConfrim">启 用</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="channelTypeVisible"
      size="tiny">
      <span>是否要删除当前通道</span>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="channelTypeVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="delConfrim">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import { Col, Row, Input, Button, Table, TableColumn, Dialog, Pagination, Select, Option } from 'element-ui'
  export default {
    methods: {
      activeConfrim () {
        this.channelTypeActiveVisible = false
      },
      editConfrim () {
        this.channelTypeEditVisible = false
      },
      startCannelType () {
        this.channelTypeActiveVisible = true
      },
      channelTypeCurrentChange (v) {
        this.currentPage = v
      },
      editCannelType (id) {
        this.typeTitle = '编辑通道类型'
        this.channelTypeEditVisible = true
      },
      delConfrim () {
        this.channelTypeVisible = false
        this.channelTypeData.splice(this.index, 1)
      },
      delCannelType (index) {
        this.index = index
        this.channelTypeVisible = true
      },
      createChannelType () {
        this.typeTitle = '新建通道类型'
        this.channelTypeEditVisible = true
      },
      SearchIndexContent () {}
    },
    data () {
      return {
        activeStatus: '启用',
        channelTypeActiveVisible: false,
        typeTitle: '新建',
        chanelTypeLevelData: [],
        chanelTypeLevelValue: '',
        chanelTypeDescription: '',
        chanelTypeName: '',
        channelTypeEditVisible: false,
        channelTypeData: [
          {}
        ],
        currentPage: 1,
        channelTypeVisible: false,
        index: '',
        search: ''
      }
    },
    components: {
      'el-col': Col,
      'el-row': Row,
      'el-input': Input,
      'el-button': Button,
      'el-table': Table,
      'el-table-column': TableColumn,
      'el-dialog': Dialog,
      'el-pagination': Pagination,
      'el-select': Select,
      'el-option': Option
    }
  }
</script>
<style lang="scss" scoped>
  .filter-bar-query {
    height: 40px;
    padding: 0 10px;
    border-bottom: 1px solid #e5e5e5;
  }
  .create-index-input {
    width: 70%;
  }
  .create-index-label {
    display: inline-block;
    width: 80px;
    text-align: right;
    margin-right: 15px;
  }
  .create-label-description {
    position: relative;
    float: left;
    margin-right: 18px;
  }
  .create-input-row {
    margin-bottom: 15px;
  }
</style>